<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body>div:first-child {
            border: 1px solid red;
            float: left;
            width: 100px;
            height: 100px;
        }
        #secondDiv {
            border: 1px solid green;
            float: left;
            width: 100px;
            height: 100px;
            margin-left: 100px;
        }
        #wrapped {
            background-color: #CCC;
        }  
    </style>
</head>
<body>
    
    <div id="firstDiv">
        <!-- 标签的属性draggable得true -->
        <p id="wrapped" draggable="true">被拖拽元素</p>
    </div>
    <div id="secondDiv">

    </div>
    <script>
        /*应用于拖拽元素的事件
            1.ondrag      整个拖拽过程都会调用 持续
            2.ondragleave 被拖拽元素完全离开原来位置时调用
            3.ondragstart 拖拽开始调用
            4.ondragend   拖拽结束时调用
        */
        var p = document.querySelector("#wrapped");
        p.ondrag=function(){
            console.log("ondrag");
        }
        p.ondragleave=function(){
            console.log("被拖拽元素：ondragleave");
        }
        p.ondragstart=function(){
            console.log("ondragstart");
        }
        p.ondragend=function(){
            console.log("ondragend");
        }
        /*应用于目标元素的事件
            1.ondragenter     当拖拽元素进入时调用
            2.ondragover      当拖拽元素停留在目标元素上调用
            3.ondrop          当元素在目标元素上松开鼠标时使用
            4.ondragleave     当鼠标离开目标元素时调用
        */
        var target = document.querySelector("#secondDiv");
        target.ondragenter = function(){
            console.log("dragenter");
        }
        target.ondragover = function(e){
            console.log("dragover");
            // 如果想触发ondrop事件 那么久必须在这个位置阻止浏览器的默认行为
            e.preventDefault();
        }
        /*浏览器会默认住址ondrop事件  我们必须在ondragover中阻止浏览器的默认行为*/
        target.ondrop = function(){
            console.log("drop");
            // 添加被拖拽元素到目标元素中
            target.appendChild(p);
        }
        target.ondragleave = function(){
            console.log("目标元素：dragleave");
        }
    </script>
</body>
</html>